<script lang="ts" setup>
import { computed } from 'vue'
import { useConfigStore } from '@renderer/stores'
import useFps from '@renderer/componsables/useFps'
import type { DataType } from '@renderer/types/index'
import { CloseOne } from '@icon-park/vue-next'

interface Props {
  type: DataType
  placeholder?: string
  tip?: string
  buttonStyle?: 'success' | 'danger' | 'primary'
}
const { config } = useConfigStore()
const props = defineProps<Props>()
const { newValue, add, remove } = useFps()

const list = computed(() => {
  return props.type === 'size' ? config.sizes : config.frames
})
</script>

<template>
  <main>
    <el-select :placeholder="props.placeholder">
      <el-option v-for="(item, index) in list" :key="item" :label="item" :value="item">
        <div class="flex justify-between items-center">
          {{ item }}
          <div v-if="index > 1" class="delIcon" @click="remove(props.type, index)">
            <close-one theme="outline" size="14" />
          </div>
        </div>
      </el-option>
    </el-select>
    <div class="flex gap-1 mt-2 items-center">
      <el-input v-model="newValue" :placeholder="props.tip" size="default" clearable></el-input>
      <el-button :type="props.buttonStyle" size="default" @click="add(props.type)">增加</el-button>
    </div>
  </main>
</template>

<style scoped>
.delIcon {
  @apply text-slate-300 hover:text-red-500 hover:scale-125 cursor-pointer duration-300;
}
</style>
